<!--用车申请页-->
<template>
  <div style="height: 6vh;background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">订单管理</span>
  </div>
  <!-- 申请订单弹窗 -->
  <el-dialog title="创建订单" v-model="addOrdersDialogVisible" style="width:1000px;padding:40px;">
    <el-form label-width="80px" label-position="top" v-model="orderOperate">
      <el-row :gutter="30">
        <el-col :span="6">
          <el-form-item label="用餐用户">
            <el-input readonly :value="user.username"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="分店">
              <el-select placeholder="请选择店面" style="width:50%;" v-model="orderOperate.branchId" @change="GetStorefrontValue">
                <el-option v-for="item in branchOptions" :label="item.name" :value="item.id"></el-option>
<!--                <el-option label="分店1" value="101"></el-option>-->
<!--                <el-option label="分店2" value="102"></el-option>-->
<!--                <el-option label="分店3" value="103"></el-option>-->
              </el-select>
            </el-form-item>
        </el-col>
<!--弹出内层弹窗：显示菜品内容    -->
        <el-col :span="12">
          <el-form-item label="菜系">
            <el-select placeholder="请选择您要选择的菜系" style="width:50%;" v-model="orderOperate.cuisine">
              <el-option v-if="item in Cuisine" :label="item.label" :value="item.value"></el-option>
<!--                <el-option label="北京菜" value="bj"></el-option>-->
<!--                <el-option label="西湖菜" value="xh"></el-option>-->
<!--                <el-option label="潍坊菜" value="wf"></el-option>-->
<!--                <el-option value="cc">长春菜</el-option>-->
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="餐桌">
<!--一个下拉框,内部显示可用的餐桌的编号-->
            <el-select placeholder="请选择餐桌" style="width:50%;" v-model="orderOperate.tableId">
              <el-option v-for="item in tableList" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="菜品">
            <el-button type="primary" style="float:right;" @click="addDishDialogVisible=true">选择菜品</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="备注" >
            <el-input placeholder="请输入" v-model="orderOperate.remark" type="textarea" resize="none" :rows="3"></el-input>
          </el-form-item>
        </el-col>
<!--统计菜品的价格及数量      -->
          <el-col :span="12" >
            <el-form-item label="总计:">
              <span>{{number}}个菜品,{{dishPrice}}元</span>
            </el-form-item>
          </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="outcancel">取消</el-button>
      <el-button type="primary" @click="outconfirm">确定</el-button>
    </template>
  </el-dialog>
<!-- 点击选择菜品弹出弹框,内部是菜品的多选框，用来选择菜品并获取其选择的数据(菜品名,价格) -->
  <el-dialog title="请点餐！" v-model="addDishDialogVisible" style="width:1000px;padding:40px;">
<!--  创建菜品的多选框，并在其后边添加其价格  -->
    <el-checkbox-group v-model="getDishList">
      <el-checkbox v-for="item in dishList" :label="item.dish" :value="item"/>
<!--      <el-checkbox label="红烧肉" value="1001"></el-checkbox>-->
<!--      <el-checkbox label="小鸡炖蘑菇" value="1002"></el-checkbox>-->
<!--      <el-checkbox label="千叶豆腐" value="1003"></el-checkbox>-->
<!--      <el-checkbox label="凉菜" value="1004"></el-checkbox>-->
    </el-checkbox-group>
    <el-button @click="incancel">取消</el-button>
    <el-button type="primary" @click="inconfirm">确定</el-button>
  </el-dialog>
  <!-- 订单回显表格 -->
  <el-card style="margin:20px">
    <el-table :data="feedbackbase">
      <el-table-column type="index" width="80" align="center" prop="id" label="编号"></el-table-column>
      <el-table-column align="center" :formatter="branchName" prop="branchId" label="分店id"></el-table-column>
      <el-table-column align="center" :formatter="formatTableTable" prop="tableId" label="餐桌id"></el-table-column>
      <el-table-column align="center" prop="remark" label="备注"></el-table-column>
      <el-table-column align="center" prop="total" label="总价"></el-table-column>
      <el-table-column align="center" prop="createTime" label="下单时间"></el-table-column>
      <el-table-column align="center" prop="updatteTime" label="更新时间"></el-table-column>
      <el-table-column align="center" :formatter="payStatus" prop="status" label="状态"></el-table-column>
      <el-table-column align="center" prop="paymentAmount" label="支付金额"></el-table-column>
      <el-table-column align="center" :formatter="payName" prop="paymentType" label="支付方式"></el-table-column>
      <el-table-column prop="code" label="订单详情" align="center">
        <template #default="scpoe">
          <el-button link type="primary" size="small" @click="showDictOption(scpoe.row.id)">订单详情</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>
<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";
import router from "@/router";
//定义变量控制创建申请单弹窗是否出现
const addOrdersDialogVisible = ref(false);

// const fileList = ref([]);
const dialogImageUrl = ref('');
const dialogVisible = ref(false);
//定义菜系的数组用来存储菜系
const Cuisine = ref([]);


//定义餐桌的数组用来存储可用餐桌编号
const tableList = ref([]);
// test
const DishId=ref([]);

// const GetStorefrontValue =()=>{
//   //定义一个方法用来获得用户选择的分店id
//   let branchid = parseInt(orderOperate.value.branchId);
//   console.log(branchid);
//   //定义通过获取到的branchId来获取分店下的餐桌的方法
//     axios.get(BASE_URL+"/v1/Orders/selectTableByBranchId?id="+branchid).then((response)=>{
//       if(response.data.code==2000){
//         tableList.value = response.data.data;
//       }else{
//         ElMessage.error(response.data.msg);
//       }
//     })
//   //定义通过或得到的branchId来获取分店下的菜品的方法
//   axios.get(BASE_URL+"/v1/Orders/selectTypeByBranchId?id="+branchid).then((response)=>{
//     if(response.data.code==2000){
//       tableList.value = response.data.data;
//       dishList.value = response.data.data;
//     }else{
//       ElMessage.error(response.data.msg);
//     }
//   })
// }

//通过全局变量获取用户的信息，并赋值给username
const user = ref(getUser());
//定义店面数组用来保存营业中的店面
const branchOptions = ref([]);

//定义点击选择菜品时，内层弹窗
const addDishDialogVisible = ref(false);
//定义对象用来保存用户输入的Form表单订单数据
const orderOperate = ref({
  remark:'',
  branchId:'',
  userId:user.value.id,
  cuisine:'',
  tableId:'',
});

//定义外层弹窗的取消方法
const outcancel = () => {
  //将表单orderOperate中的数据清空
  orderOperate.value = {};
  //关闭外层弹窗
  addOrdersDialogVisible.value=false;
}

//定义外层弹窗的确定方法
const outconfirm = () => {
  console.log(orderOperate);
  // 动态新增保存菜品详情数据
  orderOperate.value.OrdereddishesList=getDishList.value;
  // 加入数据
  //orderOperate.value.OrdereddishesList.push(getDishList.value);
  let data = qs.stringify(orderOperate.value);
  // 测试打印
  console.log(data)
  axios.post(BASE_URL+"/v1/orders/insertOrders",data).then((response)=>{
    if (response.data.code==2000){
      ElMessage.success("插入成功！");
      addOrdersDialogVisible.value=false;
      orderOperate.value={
        remark:'',
        branchId:'',
        userId:user.id,
        cuisine:'',
        tableId:'',
      };
      getDishList.value=[];
      loadOrders();
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}
//定义内层弹窗的取消方法
const incancel = () => {
  //将表单中菜品的数据清空并关闭内层弹窗
  addDishDialogVisible.value = false;
  getDishList.value=[];
}
//定义数组用来保存用户选择的菜品

const dishList = ref([
  {
    dishId: 101,
    dish: '红烧肉',
    price: 30,
    number: 1
  },
  {
    dishId: 102,
    dish: '小鸡炖蘑菇',
    price: 35,
    number: 1
  },
  {
    dishId: 103,
    dish: '千叶豆腐',
    price: 25,
    number: 1
  },
  {
    dishId: 104,
    dish: '青椒炒肉丝',
    price: 28,
    number: 1
  }
])

//定义内层弹窗的确定方法   并将数据添加到对象中
const inconfirm = () => {
  //关闭内层弹窗
  addDishDialogVisible.value = false;
  // test
  console.log("1"+getDishList.value[0].dishId);
  const order=getDishList.value[0];
  const orderList = [];
  orderOperate.value.OrdereddishesList=getDishList.value;
  console.log("2"+DishId.value);

}
//定义数组用来接收表中的数据
const feedbackbase = ref([]);
//定义一个回显数据的方法需要一进入页面就开始执行
const loadOrders = () =>{
  axios.get(BASE_URL+'/v1/orders/select').then((response)=>{
    if (response.data.code == 2000){
      feedbackbase.value = response.data.data;
    }else{
      ElMessage.error("如需刷新页面，请手动刷新请手动刷新！");
    }
  })
}
//定义数组用来维护系统分店的显示
const branchName = (row,column,cellValue,index)=> {
  if (!branchOptions.value) {
    return cellValue;
  }
  for (let item of branchOptions.value) {
    if (item.id == cellValue) {
      cellValue = item.name;
    }
  }
  return cellValue;
}
//定义方法用来维护支付方式的显示
const payName = (row,column,cellValue,index)=> {
  switch (cellValue) {
    case '0':
      cellValue = '现金';
      break;
    case '2':
      cellValue = '微信';
      break;
    case '1':
      cellValue = '支付宝';
  }
  return cellValue;
}

//定义方法用来维护支付状态的显示
const payStatus = (row,column,cellValue,index)=> {
  if (cellValue=="0"){
    cellValue = '未支付';
  }else if(cellValue=="1") {
    cellValue = '已支付';
  }else if(cellValue=="2"){
    cellValue = '已选座';
  }else if(cellValue=="3"){
    cellValue = '已评论';
  }
  return cellValue;
}

// 定义保存餐桌数据的数组
const tableOptions = ref([]);
// 通过id显示餐桌的对应显示名称
const formatTableTable = (row,column,cellValue,index) => {
  if(!tableOptions.value){
    return cellValue;
  }
  for(let item of tableOptions.value){
    if(item.id==cellValue){
      cellValue = item.name;
    }
  }
  return cellValue;
}
// const branchName = (value) =>{
//   if (value == '101'){
//     return '分店一';
//   }else if (value == '102'){
//     return '分店二';
//   }else if (value == '103'){
//     return '分店三';
//   }
//   return value;
// }

onMounted(()=>{
    loadOrders();
    // 加载所有的分店数据,回显分店的选项
    getBranchs(branchOptions);
    getTables(tableOptions);
    //getTables(tableList)
    //获取所有菜系的方法
    //get(Cuisine)
    //获取所有支付方式的方法
    //get(payList)
})
const showDictOption =(id)=>{
  router.push('/orderDetail?id='+id);
}
//定义数组用来收集用户选择的菜品
const getDishList =ref([]);
//定义获取点菜的数量的方法
const number = ref(getDishList.value.length);
//定义获取已点菜品的总价
let sum = 0;
const dishPrice = ref(sum);
//定义获得总价的方法
const aaa = (getDishList) =>{
  for (let item of getDishList.value){
    sum += item.price;
  }
}
</script>

<style scoped>
</style>